<!-- Giftina：https://giftia.moe -->
<!DOCTYPE html>
<html lang="zh-Hans">

  <head>
    <link rel="preload" href="/socket.io/socket.io.js" as="script" />
    <meta name="theme-color" content="#ed90ba" />
    <meta http-equiv="X-UA-Compatible" messages="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <meta name="viewport" messages="minimal-ui" />
    <title>地雷战</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>

  <body>
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
    {
      "imports": {
      "three": "./three.module.js"
      }
    }
   </script>
    <script src="/socket.io/socket.io.js"></script>
    <script type="module">
      const socket = io();
      socket.on("message", function (msg) {
        console.log(msg);
      });

      import * as THREE from "three";
      import { OrbitControls } from '/controls/OrbitControls.js';

      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      const scene = new THREE.Scene();

      const planeGeometry = new THREE.PlaneGeometry(100, 50);
      const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x555555, side: THREE.DoubleSide });
      const plane = new THREE.Mesh(planeGeometry, planeMaterial);
      scene.add(plane);

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.1;
      controls.enableRotate = true;

      camera.position.set(0, -60, 60);
      camera.lookAt(plane.position);

      function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
      }
      animate();

      userIconAdd();


      function userIconAdd() {
        const circleGeometry = new THREE.CircleGeometry(1, 32);
        const circleMaterial = new THREE.MeshBasicMaterial({ color: 0x008800 });
        const circle = new THREE.Mesh(circleGeometry, circleMaterial);
        scene.add(circle);
        circle.position.z = 1;
      }

      function userIconMovement() {
        circle.position.x += 1;
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      }
      window.addEventListener('resize', onWindowResize, false);
    </script>
  </body>

</html>